<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css"  href="/elementUI/theme-chalk/index.css">
    <style>
        .el-header {
            background-color: #dddddd;

            line-height: 60px;
        }

        .el-aside {
            color: #333;
        }
    </style>
</head>
<body>
    <div id="app">
        <template>
            <el-container style="  border: 1px solid #eee">
                <el-aside width="210px" style="background-color: rgb(238, 241, 246)">
                    <el-form>
                    <el-form-item label="项目名称">
                        <el-select filterable  v-model="initiateProject.name" @change="changeProject" value-key="item"  placeholder="项目名称">
                            <el-option v-for="(item,idx) in initiateProjects"
                                       :label="item.name"
                                       :key="idx"
                                       :value="item"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="项目编号">
                        <el-input v-model="initiateProject.number" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="项目负责人">
                        <el-input v-model="initiateProject.staff.name" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="项目类别">
                        <el-input v-model="initiateProject.projectTypeName" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="开始时间">
                        <el-date-picker disabled type="date" placeholder="选择日期" v-model="initiateProject.startTime" style="width: 100%;"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="结束时间">
                        <el-date-picker disabled type="date" placeholder="选择日期" v-model="initiateProject.endTime" style="width: 100%;"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="工作模板">
                        <el-input v-model="initiateProject.projectTypeName" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="项目成员">
                        <el-input v-for="item in initiateProject.members" v-model="item.name" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input type="textarea" disabled  v-model="initiateProject.remark"></el-input>
                    </el-form-item>
                        </el-form>
                </el-aside>
                <el-container>
                    <el-header style="text-align: right; font-size: 12px; ">
                        <el-button type="primary" style="margin-right: 15px" @click="submitExecutable">执行模板</el-button>
                    </el-header>

                    <el-main>
                        <el-table :cell-class-name="tableCellClassName" :data="workTemplateExecutables"  border style="width: 100%" @row-click="modifyRow">
                        <!--            <el-table-column prop="id" ></el-table-column>-->
                        <el-table-column type="index" label="编号" ></el-table-column>
                        <el-table-column prop="workTemplateContent.content" label="内容"  ></el-table-column>
                        <el-table-column prop="workTemplateContent.workload" label="层级"></el-table-column>
                        <el-table-column prop="workTemplateContent.level" label="工作量"></el-table-column>
                        <el-table-column prop="workTemplateContent.time" label="时间"></el-table-column>
                        <!--<el-table-column prop="date" label="工作时间"></el-table-column>-->
                        <el-table-column prop="workTemplateContent.roleName" label="角色" ></el-table-column>
                        <el-table-column prop="staff.name" label="员工姓名"></el-table-column>

                        </el-table>
                   </el-main>
                </el-container>
            </el-container>

        </template>
        <template>
            <el-dialog :visible.sync="dialogFormVisible" width="450px" @closed="closeDialog">
                <el-form  ref="form" :model="workTemplateExecutable" label-width="90px" style="width: 310px;" >

                    <el-form-item label="编号">
                        <el-input disabled v-model="workTemplateExecutable.workTemplateContent.id"></el-input>
                    </el-form-item>

                    <el-form-item label="内容">
                        <el-input disabled v-model="workTemplateExecutable.workTemplateContent.content"></el-input>
                    </el-form-item>

                    <el-form-item label="层级">
                        <el-input disabled v-model="workTemplateExecutable.workTemplateContent.workload"></el-input>
                    </el-form-item>

                    <el-form-item label="工作量">
                        <el-input disabled v-model="workTemplateExecutable.workTemplateContent.level"></el-input>
                    </el-form-item>

                    <el-form-item label="时间">
                        <el-input disabled v-model="workTemplateExecutable.workTemplateContent.time"></el-input>
                    </el-form-item>

                    <el-form-item label="角色">
                        <el-input disabled v-model="workTemplateExecutable.workTemplateContent.roleName"></el-input>
                    </el-form-item>

                    <el-form-item label="工作人员">
                        <el-select filterable  v-model="workTemplateExecutable.staff" value-key="id" placeholder="请选择员工">
                            <el-option v-for="item in tempMembers"
                                       :label="item.name"
                                       :key="item.id"
                                       :value="item"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer" >
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="onSubmit">修 改</el-button>
                </div>
            </el-dialog>
        </template>
    </div>
</body>
<script src="/vue/vue.js"></script>
<script src="/elementUI/index.js"></script>
<script src="/vue/axios.js"></script>
<script>
    var href = window.location.href;
    var id = href.substring(href.indexOf("id=")+3, href.length)
    const app = new Vue({
        el: '#app',
        data: {
            initiateProject:{
                id: '',
                name: '',
                number: '',
                staffId: '',
                staff:[],
                projectTypeId:'',
                projectTypeName:'',
                workTemplateId: '',
                startTime: '',
                endTime: '',
                riskAssessment: '',
                remark: '',
                members:[]
            },
            user:{},
            initiateProjects:[],
            workTemplateExecutables:[],
            workTemplateExecutable:{
                workTemplateContent:{
                    content: '',
                    id: '',
                    level: '',
                    remark: '',
                    roleId: '',
                    roleName: '',
                    time: '',
                    workTemplateId: '',
                    workload: '',
                },
                staff:{
                    id:'',
                    name:'',
                }
            },
            dialogFormVisible: false,
            curRow:{},
            tempMembers:[]
        },
        methods:{
            tableCellClassName({row, column, rowIndex, columnIndex}){
                row.index=rowIndex;
                column.index=columnIndex;
            },
            changeProject(item){
                this.initiateProject.id =item.id;
                this.initiateProject.name=item.name
                this.initiateProject.number=item.number
                this.initiateProject.staffId=item.staffId
                this.initiateProject.staff=item.staff
                this.initiateProject.projectTypeId=item.projectTypeId
                this.initiateProject.projectTypeName=item.projectTypeName
                this.initiateProject.workTemplateId=item.workTemplateId
                this.initiateProject.startTime=item.startTime
                this.initiateProject.endTime=item.endTime
                this.initiateProject.riskAssessment=item.riskAssessment
                this.initiateProject.remark=item.remark
                this.initiateProject.members=item.members
                axios.get(
                    '/work-template/createWorkTemplateExecutable?id='+id,
                ).then(res => {
                    this.workTemplateExecutables = res.data;
                } )
            },
            modifyRow(row){
                this.dialogFormVisible =true;
                this.curRow = row;
                this.workTemplateExecutable.workTemplateContent = row.workTemplateContent
                this.workTemplateExecutable.staff = row.staff
                var a = this.tempMembers
                this.initiateProject.members.forEach(function(item) {
                    item.roles.forEach(function(itemm){
                        if (itemm.id === row.workTemplateContent.roleId){
                            a.push(JSON.parse(JSON.stringify(item)))
                        }
                    })
                })
            },
            closeDialog(){
                this.dialogFormVisible = false;
                this.workTemplateExecutable.workTemplateContent={}
                this.workTemplateExecutable.staff={}
                this.tempMembers=[]
                this.curRow = {}
            },
            onSubmit() {
                this.curRow.workTemplateContent = this.workTemplateExecutable.workTemplateContent
                this.curRow.staff = this.workTemplateExecutable.staff
                this.$message('修改成功');
                this.closeDialog();
            },
            submitExecutable(){
                var b = this.initiateProject
                var c = this.workTemplateExecutables
                this.$confirm('确认执行？')
                    .then(_ => {
                        c.forEach(function(item){
                            item.staffId = item.staff.id
                            item.initiateProjectId = b.id
                            item.initiateProject = b
                            item.workTemplateContentId = item.workTemplateContent.id
                            item.inputTime = new Date()
                        })
                        console.log(c)
                        axios.post(
                            '/work-template/uploadNewExecutable' ,
                            this.workTemplateExecutables
                        ).then(res => {
                            if (res.data == 0){
                                this.$message('修改成功');
                                window.location = '/work-template/tableTemplates';
                            }
                        } )
                    })
                    .catch(_ => {
                        return false;
                    });

            }
        },
        created(){
            axios.get(
                '/purchase/getAllInitiateProjectByWorkTemplateId?id='+id,
            ).then(res => {
                this.initiateProjects = res.data;
            } )

        }

    })

</script>
</html>